import React, { Component } from "react"
import Footer from "./Component/Footer"
import Header from "./Component/Header"
import List from "./Component/List"
import './App.css'
//创建并暴漏APP组件
export default class App extends Component {
    //状态在哪里，操作的方法就在那里
    state = {
        todos: [
            { id: '001', name: "吃饭", done: true },
            { id: '002', name: "睡觉", done: true },
            { id: '003', name: "打代码", done: false },
            { id: '004', name: "逛街", done: true },
        ]
    }
    //addTodo 用于添加一个todo 接收的参数时 todo对象
    addTodo = (todoObj) => {
        const { todos } = this.state;
        const newTodos = [todoObj, ...todos]
        this.setState({ todos: newTodos })
    }
    //updateTodo用于更新一个todo对象
    updateTodo = (id, done) => {
        const { todos } = this.state;
        //匹配處理數據
        const newTodos = todos.map((todoObj) => {
            if (todoObj.id === id) {
                return { ...todoObj, done: done }  //将这个对象的值修改后返回             
            } else return todoObj
        })
        this.setState({ todos: newTodos })
    }
    //delTodo用于删除一个todo对象
    delTodo = (id) => {
        //获取原来的todos
        const { todos } = this.state;
        //删除指定ID的todo对象
        const newTodos = todos.filter((todoObj) => {
            return todoObj.id !== id
        })
        this.setState({ todos: newTodos })
    }
    //用于全选 全部选
    checkAllTodo = (done) => {
        //获取原来的todos
        const { todos } = this.state;
        const newTodos = todos.map((todoObj) => { return { ...todoObj, done: done } })//将这个对象的值修改后返回 
        this.setState({ todos: newTodos })
    }
    cleanAllDone = () => { 
        //获取原来的todos
        const { todos } = this.state;
        //删除指定ID的todo对象
        const newTodos = todos.filter((todoObj) => {
            return !todoObj.done
        })
        this.setState({ todos: newTodos })
    }
    render() {
        const { todos } = this.state;
        return (<div className="todo-container">
            <div className="todo-wrap">
                {/* 下边这里将addTodo函数传递给子组件调用 */}
                <Header addTodo={this.addTodo}  ></Header>
                <List updateTodo={this.updateTodo} todos={todos} delTodo={this.delTodo}></List>
                <Footer todos={todos} checkAllTodo={this.checkAllTodo} cleanAllDone={this.cleanAllDone}></Footer>

            </div>
        </div>)
    }
}
